<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
  </head>
  
  <body>
    <input type="button" value="发送请求" onclick="sendReq()">
  </body>
  
  <script>
    function sendReq() {
      const xhr = new XMLHttpRequest();
      
      // getResponseHeader用于获取HTTP响应头；getAllResponseHeaders用于获取所有HTTP响应头，不同响应头之间使用\r\n分隔
      console.log(xhr.getResponseHeader('Content-Length')); // null
      console.log(xhr.getAllResponseHeaders()); // 空
      xhr.onloadend = () => {
        console.log(xhr.getResponseHeader('Content-Length')); // 86
        console.log(xhr.getAllResponseHeaders()); // content-length: 86\r\ncontent-type: application/json; charset=utf-8\r\n
      };
      
      // open用于设置HTTP请求参数，其形参为(请求方法, 请求URL[, 是否异步, 认证用户名, 认证密码])，同一XHR对象的请求未结束再次open导致未结束请求被中止
      xhr.open('POST', 'http://localhost:9000/back_end_post/params', true, 'user', 'pwd');
      
      const data = {body_name: 'body'};
      // setRequestHeader用于设置HTTP请求头，setRequestHeader需晚于open先于send才生效，若多次设置同一key那么value采取逗号和空格分隔的合并策略
      xhr.setRequestHeader('Content-Type', 'application/json');
      
      // send用于实际发送HTTP请求，其形参为([POST数据体])，onevent需先于send才生效
      xhr.send(JSON.stringify(data));
      
      setTimeout(() => {
        // abort用于中止未结束的HTTP请求，该方法执行后readyState属性和status属性分别变为4和0
        xhr.abort();
      }, 4000);
    }
  </script>
</html>